<template>
	<div class="home">
		<a-layout id="components-layout-demo-custom-trigger">
			<a-layout-sider v-model="collapsed" :trigger="null" collapsible>
				<div class="logo">X站后台管理系统</div>
				<a-menu theme="dark" mode="inline" :default-selected-keys="['imgAdmin']" @click="handleClick">
					<a-sub-menu key="sub2">
						<span slot="title">
							<a-icon type="home" /><span>首页管理</span>
						</span>
						<a-menu-item key="imgAdmin">
							<a-icon type="area-chart" />
							<span>图片管理</span></span>
						</a-menu-item>
						<a-menu-item key="imgClassAdmin">
							<a-icon type="bars" />
							<span>图片分类</span></span>
						</a-menu-item>
						<a-menu-item key="swiperAdmin">
							<a-icon type="fund" />
							<span>轮播图管理</span>
						</a-menu-item>
					</a-sub-menu>
					<a-sub-menu key="sub">
						<span slot="title">
							<a-icon type="user" />
							<span>用户管理</span>
						</span>
						<a-menu-item key="administer">
							<a-icon type="user-add" />
							<span>管理员</span></span>
						</a-menu-item>
						<a-menu-item key="user">
							<a-icon type="team" />
							<span>普通用户</span></span>
						</a-menu-item>
					</a-sub-menu>
				</a-menu>
			</a-layout-sider>
			<a-layout>
				<a-layout-header style="background: #fff; padding: 0">
					<a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"
						@click="() => (collapsed = !collapsed)" />

					<div class="header-login">
						<div>
							<a-dropdown :trigger="['click']" :getPopupContainer="(trigger) => trigger.parentNode"
								style="top: 100px; z-index: 100">
								<div class="userInfo" @click="(e) => e.preventDefault()">
									<img :src="userInfo != null && baseUrl + userInfo.userImg" alt
										:title="userInfo != null && userInfo.userName" />
								</div>
								<a-menu slot="overlay" @click="userOnClick">
									<a-menu-item key="1">
										<a-icon type="poweroff" />退出登录
									</a-menu-item>
								</a-menu>
							</a-dropdown>
						</div>
					</div>
				</a-layout-header>
				<a-layout-content :style="{
            margin: '24px 16px',
            padding: '24px',
            background: '#fff',
            minHeight: '280px',
          }">
					<router-view></router-view>
				</a-layout-content>
			</a-layout>
		</a-layout>
	</div>
</template>

<script>
	// @ is an alias to /src

	import EventBus from "@/utils/EventBus";
	export default {
		name: "HomeView",
		components: {

		},
		data() {
			return {
				userInfo: JSON.parse(localStorage.getItem("userInfo")),
				baseUrl: process.env.VUE_APP_API_BASE_URL,
				collapsed: false,
			};
		},
		mounted() {
			// EventBus.$on("userInfo", (userInfo) => {
			//   this.userInfo = userInfo;
			// });
		},
		methods: {
			// 用户头像下拉菜单
			userOnClick(e) {
				// 1: 个人资料
				if (e.key == 1) {
					// this.$router.push("/login");
					localStorage.clear();
					window.location.reload();
				}
			},
			handleClick(e) {
				this.$router.push({
					name: e.key
				})
			},
		},
	};
</script>
<style scoped>
	#components-layout-demo-custom-trigger .trigger {
		font-size: 18px;
		line-height: 64px;
		padding: 0 24px;
		cursor: pointer;
		transition: color 0.3s;
	}

	#components-layout-demo-custom-trigger .trigger:hover {
		color: #1890ff;
	}

	#components-layout-demo-custom-trigger .logo {
		height: 32px;
		background: rgba(255, 255, 255, 0.2);
		margin: 16px;
	}

	.userInfo {
		width: 35px;
		height: 35px;
		display: flex;
		align-items: center;
	}

	.userInfo:hover {
		cursor: pointer;
	}

	.userInfo img {
		border-radius: 3px;
		width: 100%;
		height: 100%;
	}

	::v-deep .ant-dropdown {
		position: fixed !important;
		top: 52px !important;
	}

	.search-box {
		margin-right: 50px;
	}

	::v-deep .ant-layout-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 10px !important;
	}

	aside {
		height: 100vh;
		position: fixed;
	}

	.ant-layout>section {
		margin-left: 220px;
	}

	.logo {
		color: #fff;
		line-height: 32px;
		text-align: center;
	}

	>>>.ant-layout-content {
		margin-bottom: 0 !important;
	}
</style>
